<template>
    <div class="repository-container">
      <div class="repository-header">
        <div class="header-left">
          <el-tabs v-model="activeTab" class="custom-tabs">
            <el-tab-pane name="participated">
              <span slot="label">
                <i class="el-icon-s-cooperation"></i>
                我参与的 <span class="count">{{ participatedCount }}</span>
              </span>
            </el-tab-pane>
            <el-tab-pane name="all">
              <span slot="label">
                <i class="el-icon-folder"></i>
                全部 <span class="count">{{ totalCount }}</span>
              </span>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="header-right">
          <el-input
            v-model="searchQuery"
            placeholder="查找代码仓库..."
            prefix-icon="el-icon-search"
            class="search-input"
            clearable
          />
          <el-dropdown trigger="click" @command="handleSort">
            <el-button type="text">
              <i class="el-icon-sort"></i>
              {{ currentSort.label }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in sortOptions" 
                :key="item.value" 
                :command="item.value"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="text" icon="el-icon-download" @click="handleImport">
            导入仓库
          </el-button>
          <el-button type="primary" icon="el-icon-plus" @click="$router.push('/admin/repository/create')">
            新建仓库
          </el-button>
        </div>
      </div>
  
      <div class="repository-list">
        <div v-for="repo in mockRepositories" :key="repo.id" class="repository-item">
          <div class="repo-main">
            <div class="repo-title">
              <i :class="repo.visibility === 'private' ? 'el-icon-lock' : 'el-icon-view'"
                 :style="{color: repo.visibility === 'private' ? '#e83e8c' : '#28a745'}">
              </i>
              <router-link :to="`/admin/repository/${repo.id}`" class="repo-name">
                {{ repo.owner }}/{{ repo.name }}
              </router-link>
            </div>
            <div class="repo-desc">{{ repo.description }}</div>
            <div class="repo-meta">
              <span v-if="repo.language">
                <span class="language-dot" :style="{backgroundColor: repo.languageColor}"></span>
                {{ repo.language }}
              </span>
              <span v-if="repo.stars">
                <i class="el-icon-star-on"></i> {{ repo.stars }}
              </span>
              <span v-if="repo.forks">
                <i class="el-icon-share"></i> {{ repo.forks }}
              </span>
              <span>更新于 {{ repo.updatedAt }}</span>
            </div>
          </div>
          <div class="repo-actions">
            <el-button-group>
              <el-button size="small" :type="repo.starred ? 'warning' : ''" icon="el-icon-star-off">
                {{ repo.stars }}
              </el-button>
              <el-button size="small" icon="el-icon-share">{{ repo.forks }}</el-button>
            </el-button-group>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'RepositoryList',
    data() {
      return {
        activeTab: 'participated',
        searchQuery: '',
        currentSort: { label: '最近更新', value: 'recently-updated' },
        sortOptions: [
          { label: '最近更新', value: 'recently-updated' },
          { label: '最早创建', value: 'least-recently-created' },
          { label: '名称升序', value: 'name-asc' },
          { label: '名称降序', value: 'name-desc' }
        ],
        participatedCount: 5,
        totalCount: 12,
        // 模拟数据
        mockRepositories: [
          {
            id: 1,
            name: 'shiqu-crm',
            owner: 'newzhilehuo',
            description: '师趣CRM系统 - 提供完整的客户管理、销售跟进、数据分析等功能',
            visibility: 'private',
            language: 'Vue',
            languageColor: '#41b883',
            stars: 90,
            forks: 645,
            starred: true,
            updatedAt: '2天前',
          },
          {
            id: 2,
            name: 'shiqu_crm',
            owner: 'zhilehuo',
            description: '师趣CRM Web端 - 基于Vue2的前端实现',
            visibility: 'public',
            language: 'JavaScript',
            languageColor: '#f1e05a',
            stars: 78,
            forks: 500,
            starred: false,
            updatedAt: '昨天',
          },
          {
            id: 3,
            name: 'shiqu-english-server',
            owner: 'newzhilehuo',
            description: '师趣英语服务端 - Spring Boot后端实现',
            visibility: 'private',
            language: 'Java',
            languageColor: '#b07219',
            stars: 34,
            forks: 142,
            starred: false,
            updatedAt: '3小时前',
          },
          {
            id: 4,
            name: 'shiqu-english-gpt',
            owner: 'newzhilehuo',
            description: '基于GPT的英语学习助手',
            visibility: 'public',
            language: 'Python',
            languageColor: '#3572A5',
            stars: 288,
            forks: 58,
            starred: true,
            updatedAt: '5天前',
          }
        ]
      }
    },
    methods: {
      handleSort(command) {
        const option = this.sortOptions.find(opt => opt.value === command)
        if (option) {
          this.currentSort = option
        }
      },
      handleImport() {
        this.$message({
          message: '导入功能开发中...',
          type: 'info'
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .repository-container {
    padding: 24px;
    background: #fff;
    min-height: calc(100vh - 84px);
  
    .repository-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
  
      .header-left {
        .custom-tabs {
          /deep/ .el-tabs__item {
            font-size: 14px;
            .count {
              background: #f0f0f0;
              padding: 2px 6px;
              border-radius: 10px;
              font-size: 12px;
              margin-left: 4px;
            }
          }
        }
      }
  
      .header-right {
        display: flex;
        align-items: center;
        gap: 16px;
  
        .search-input {
          width: 240px;
        }
  
        .el-button--text {
          font-size: 14px;
          color: #606266;
          
          &:hover {
            color: #409EFF;
          }
        }
      }
    }
  
    .repository-list {
      .repository-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 24px 0;
        border-bottom: 1px solid #eee;
  
        &:last-child {
          border-bottom: none;
        }
  
        .repo-main {
          flex: 1;
          margin-right: 24px;
  
          .repo-title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
  
            i {
              font-size: 16px;
            }
  
            .repo-name {
              color: #0366d6;
              font-size: 16px;
              font-weight: 600;
              text-decoration: none;
  
              &:hover {
                text-decoration: underline;
              }
            }
          }
  
          .repo-desc {
            color: #586069;
            font-size: 14px;
            margin-bottom: 8px;
            line-height: 1.5;
          }
  
          .repo-meta {
            color: #586069;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 16px;
  
            .language-dot {
              display: inline-block;
              width: 12px;
              height: 12px;
              border-radius: 50%;
              margin-right: 4px;
            }
  
            i {
              margin-right: 4px;
            }
          }
        }
  
        .repo-actions {
          .el-button-group {
            .el-button {
              padding: 8px 12px;
            }
          }
        }
      }
    }
  }
  </style>